<template>
  <div>
    <!-- 轮播图部分 -->
    <div class="carousel">
      <el-carousel height="540px" :interval="3000" type="card">
        <el-carousel-item v-for="item in list" :key="item.id">
          <img :src="item.image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="list-1">
      <img v-for="item in mainList" :key="item.id" :src="item.image" alt="" @click="goPage(item.id)" />
    </div>
    <div class="list-2">
      <img v-for="item in lastList" :key="item.id" :src="item.image" alt="" @click="goPage(item.id)" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'FirstProjectMore',
  data() {
    return {
      list: [],
      mainList: [],
      lastList: []
    }
  },
  created() {
    this.getList()
    this.getCarouselList()
    this.getMainList()
    this.getLastList()
  },
  methods: {
    async getCarouselList() {
      const { data: res } = await this.$http.get('/limit4/getCarouselData')
      this.list = res.data
    },
    async getMainList() {
      const { data: res } = await this.$http.get('/limit3/getMoreData')
      this.mainList = res.data
    },
    async getLastList() {
      const { data: res } = await this.$http.get('/limit8/getMoreData')
      this.lastList = res.data
      console.log(res)
    },
    goPage(id) {
      this.$router.push({ path: `detail/${id}` })
    },
    //获取数据
    getList() {}
  }
}
</script>
<style lang="scss" scoped>
.carousel {
  img {
    width: 100%;
    height: 700px;
  }
  ::v-deep .is-active {
    padding: 0 !important;
  }
}
.list-1 {
  position: relative;
  width: 850px;
  background: #fff;
  margin: -50px auto 0;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
  z-index: 100;
}
.list-1 img {
  width: 260px;
  height: 350px;
}
.list-2 {
  display: flex;
  justify-content: space-between;
  width: 1300px;
  margin: 50px auto;
  padding-bottom: 100px;
  flex-wrap: wrap;
}
.list-2 img {
  width: 600px;
  height: 500px;
}
.list-1,
.list-2 {
  cursor: pointer;
}
</style>
